<template>
  <div class="">
    <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="location-box">
        <span>收货人：江开航</span><span>13488993015</span>
      </div>
      <div class="cart-box">
        <div class="myself-shop">
            <span>当前选中位置</span><span>{{route.query.address}}</span>
        </div>

        <div class="goods-warpper">
      <van-swipe-cell v-for="item in newList" :key="item.id">
      <van-card
        :price="(item.price*item.num).toFixed(2)"
        :title="item.product"
        :desc="item.categoryId"
        style="margin-bottom:8px;"
      >
      <template #thumb>
                  <div class="g-thumb">
                      <van-checkbox checked-color="#ee0a24" :checked="item.state" @click="cartStore.singleCheck(item.id)"></van-checkbox>
                      <van-image :src="'http://localhost:3000/test/pic?img='+item.img_url" width="50%"></van-image>
                  </div>
              </template>
  </van-card>
  <template #right>
              <van-button
                  square
                  text="删除"
                  type="danger"
                  @click="bindDelete(item.id)"
              />
          </template>
  </van-swipe-cell>
  <!-- 提示栏 -->
  <div class="tips">
    <div class="tips-logo">
        <van-icon name="wechat-pay" style="color:green;"/>
    </div>
    <p>如您购买的商品有任何问题,请直接与购买门店联系，门店会为您处理,让您售后无忧</p>
  </div>
  </div>
  
  
  <!-- 提交订单栏 -->
  <van-submit-bar button-color="red" :price="newTotalPrice*100" button-text="提交订单" @submit="onSubmit">
    <van-checkbox checked-color="#ee0a24" :checked="cartStore.stateAll" @click="cartStore.checkAll">全选</van-checkbox>
  </van-submit-bar>

  <!-- 弹出确认订单面板 -->
  <van-action-sheet v-model:show="show">
    <div class="content">
      <div class="get-data"><span>05月20日</span></div>
      <p class="content-text">请仔细确认地址！</p>
      <div class="shopself-box">
        <p>当前选中位置: {{ route.query.address }}</p>
      </div>
      <div class="btn">
        <van-button color="#FBAB07" @click="cancel">取消订单</van-button>
        <van-button color="#F6390D" @click="confirmOrder">确认订单</van-button>
      </div>
    </div>
  </van-action-sheet>
      </div>
  </div>
</template>

<script setup lang="ts">
import {useCartStore} from '@/stores/cart'
import {ref} from 'vue'
import { Dialog } from 'vant';
import {useRouter,useRoute} from 'vue-router'
import { Toast } from 'vant';


  const route = useRoute()

  const cartStore = useCartStore()
  const show = ref(false)
  const router = useRouter()

  // 过滤新数组
  const newList = cartStore.list.filter(item=>{if (item.state===true) return item })
  // console.log(cartStore.list.filter(item=>{if (item.state===true) return item }))
  // 新数组价格
  const newTotalPrice = newList.reduce((pre,cur)=>pre+(cur.state?cur.num*cur.price:0),0)
  
  // 提交订单
  const onSubmit = ()=>{
    const stateStatus = cartStore.list.find(item=>item.state === true)
    if(stateStatus){
      show.value = true
    }else{
      Toast.fail('请先勾选商品!');
    }
    
  }
  // 取消订单
  const cancel = ()=>{
    Dialog.confirm({
        title: '确认取消订单吗？',
        message:
          '这次取消订单，下次购买价格翻10倍',
      })
        .then(() => {
          show.value= false
        })
        .catch(() => {
          show.value = true
        });
      
  }
  // 确认订单
  const confirmOrder = ()=>{
    router.push('/checkpay')
  }
  
  // 返回上级
  const onClickLeft = () => history.back();
  
  // 删除
  const bindDelete = (id:number)=>{
    cartStore.deleteGoods(id)
  }


</script>

<style scoped>
:deep(.van-button){
  height: 40px;
  border-radius: 40px;
  width: 40%;
}
.btn{
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}
.location-detail{
  font-size: 12px;
  color: rgb(189,189,190);
}
.shopself-box{
  width: 90%;
  background-color: rgb(236,236,236);
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  font-weight: 900;
  font-size: 16px;
  line-height: 25px;
  border-radius: 4px;
}
.get-data{
  position: absolute;
  background-color: rgb(236,13,13);
  left: 25%;
  right:25%;
  top: 0;
  font-size: 14px;
  color: #fff;
  width: 50%;
  height: 40px;
  border-radius:0 0 10px 10px;
  line-height: 40px;
  text-align: center;
}
.content-text{
  color: red;
  text-align: center;
  font-size: 14px;
  margin-top: 35px;
  font-weight: 500;
}
 .content {
    padding: 10px 10px 10px;
    position: relative;
    box-sizing: border-box;
  }
.tips-logo{
    margin-top: 8px;
}

.tips{
    display: flex;
    background-color: rgb(246,208,209);
    padding: 10px;
    width: 80%;
    height: 40px;
    margin: 0 auto;
    border-radius: 10px;
}
.tips p{
    font-size:12px;
    font-weight: 600;
}
:deep(.van-card__title){
    font-weight: 900;
}
:deep(.van-card__footer){
    position: absolute;
    right: 10px;
    bottom: 10px;
}
/* :deep(.van-icon){
    margin-top: 8px;
} */
  .g-thumb {
      display: flex;
  }
  :deep(.van-card__thumb){
    width: 50%;
    margin-top: 30px;
  }
  :deep(.van-checkbox){
    margin-right: 10px;
  }
  :deep(.van-card__price){
    color: red;
    font-weight: 900;
  }
  :deep(.van-card__content){
    margin-top: 0.8rem;
  }

  .logo-location{
    text-align: center;
    margin-bottom: 10px;
  
  }
  .logo-location span{
    font-size: 12px;
  }
  .goods-warpper{
    background-color: rgb(245,245,245);
  }

.location-msg{
    height: 70px;
    background-color: #fff;
    font-size: 12px;
    line-height: 25px;
    padding-left: 8px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
.location-box{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;

}
.cart-box{
    background-color: rgb(245,245,245);
    height: 100vh;
    padding-top: 20px;
}
.myself-shop{
    display: flex;
    justify-content: space-between;
    background-color: rgb(230,212,140);
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    color: rgb(150,120,16);
    font-weight: 600;
}
:deep(.van-nav-bar__content){
    background-color: rgb(236,13,13);
}
:deep(.van-nav-bar__title ){
    font-weight: 900;
    color: #fff;
}
:deep(.van-nav-bar .van-icon){
    color: white;
}
</style>
